<script setup lang="ts">
import * as Enums from '@firewall/engine/Enums';
import { onMounted } from 'vue';

const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

interface Props {
  direction?: string,
}
const props = withDefaults(defineProps<Props>(), {
  direction: () => '',
});
type Emit = {
  (e: 'update:direction', direction: string): void,
}
const emit = defineEmits<Emit>();

onMounted(() => {
  emit('update:direction', Enums.NetworkDirection.All);
});

const onSelectorChange = (direction: string) => {
  emit('update:direction', direction);
};
</script>

<template>
  <ElSelect
    :model-value="props.direction"
    class="network-direction-selector"
    filterable
    @change="onSelectorChange"
  >
    <ElOption
      v-for="direction in Enums.NetworkDirection"
      :key="direction"
      :value="direction"
      :label="t(`networkDirection.${direction}`)"
    />
  </ElSelect>
</template>

<i18n lang="yaml" locale="zh-CN">
  networkDirection:
    all: '全部方向'
    1: '内对外'
    2: '外对内'
</i18n>
<i18n lang="yaml" locale="en-US">
  networkDirection:
    all: 'All Network Direction'
    1: 'In to Out'
    2: 'Out to In'
</i18n>

<style lang="scss" scoped>
.network-direction-selector {
  width: 120px;
}
</style>
